﻿<template>
  <s-layout title="民宿详情" navbar="normal" :navbarStyle="{ color: '#333' }">
    <view class="detail-container">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      
      <view v-else-if="error" class="error-container">
        <text class="error-text">{{ error }}</text>
        <view class="retry-btn" @tap="loadDetail">
          <text>重试</text>
        </view>
      </view>
      
      <view v-else-if="!homestay" class="empty-container">
        <text class="empty-text">民宿不存在</text>
      </view>
      
      <view v-else class="detail-content">
        <view class="hero-section">
          <image 
            v-if="homestay.image" 
            :src="homestay.image" 
            mode="aspectFill"
            class="hero-image"
          />
          <view v-else class="hero-placeholder">
            <text class="placeholder-emoji">🏠</text>
          </view>
          <view class="price-badge">
            <text class="price-text">¥{{ homestay.price }}/晚</text>
            <text class="vip-price" v-if="homestay.price2 && homestay.price2 < homestay.price">VIP: ¥{{ homestay.price2 }}</text>
          </view>
        </view>
        
        <view class="content-section">
          <view class="title-section">
            <text class="main-title">{{ homestay.name }}</text>
            <text class="alias-name" v-if="homestay.aliasName">{{ homestay.aliasName }}</text>
            <text class="address">📍 {{ homestay.fullAddress }}</text>
          </view>
          
          <view class="basic-info">
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">户型</text>
                <text class="info-value">{{ homestay.layout || '未知' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">面积</text>
                <text class="info-value">{{ homestay.area || '未知' }}㎡</text>
              </view>
            </view>
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">楼层</text>
                <text class="info-value">{{ homestay.floors || '未知' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">联系人</text>
                <text class="info-value">{{ homestay.contact || '未知' }}</text>
              </view>
            </view>
          </view>
          
          <view class="devices-section" v-if="homestay.devices">
            <text class="section-title">设施</text>
            <text class="devices-text">{{ homestay.devices }}</text>
          </view>
          
          <view class="calendar-section" v-if="priceCalendar.length || bookedCalendar.length">
            <text class="section-title">价格日历</text>
            <view class="calendar-container">
              <view class="calendar-legend">
                <view class="legend-item">
                  <view class="legend-color available"></view>
                  <text class="legend-text">可预订</text>
                </view>
                <view class="legend-item">
                  <view class="legend-color booked"></view>
                  <text class="legend-text">已预订</text>
                </view>
              </view>
              <view class="calendar-grid">
                <view class="calendar-header">
                  <text class="header-cell">日</text>
                  <text class="header-cell">一</text>
                  <text class="header-cell">二</text>
                  <text class="header-cell">三</text>
                  <text class="header-cell">四</text>
                  <text class="header-cell">五</text>
                  <text class="header-cell">六</text>
                </view>
                <view class="calendar-body">
                  <view 
                    class="calendar-cell" 
                    v-for="day in calendarDays" 
                    :key="day.date"
                    :class="{ 
                      'booked': day.isBooked, 
                      'has-price': day.price,
                      'other-month': day.isOtherMonth
                    }"
                  >
                    <text class="day-number">{{ day.day }}</text>
                    <text class="day-price" v-if="day.price && !day.isBooked">¥{{ day.price }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <view class="rich-content" v-if="homestay.content">
            <text class="section-title">详细介绍</text>
            <mp-html :content="homestay.content" />
          </view>
          
          <view class="contact-section">
            <text class="section-title">联系方式</text>
            <view class="contact-item" v-if="homestay.telephone">
              <text class="contact-label">电话:</text>
              <text class="contact-value" @tap="callPhone(homestay.telephone)">{{ homestay.telephone }}</text>
            </view>
            <view class="contact-item" v-if="homestay.contact">
              <text class="contact-label">联系人:</text>
              <text class="contact-value">{{ homestay.contact }}</text>
            </view>
          </view>
        </view>
        
        <view class="bottom-actions">
          <view class="action-btn primary" @tap="showBooking">
            <text>立即预订</text>
          </view>
          <view class="action-btn secondary" @tap="callPhone(homestay.telephone)">
            <text>电话咨询</text>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import sheep from '@/sheep';

const loading = ref(false);
const error = ref('');
const homestay = ref(null);
const priceCalendar = ref([]);
const bookedCalendar = ref([]);

const props = defineProps({
  id: {
    type: String,
    required: true
  }
});

const calendarDays = computed(() => {
  const days = [];
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth();
  
  const firstDay = new Date(currentYear, currentMonth, 1);
  const lastDay = new Date(currentYear, currentMonth + 1, 0);
  const startWeekDay = firstDay.getDay();
  const daysInMonth = lastDay.getDate();
  
  for (let i = 0; i < startWeekDay; i++) {
    const prevMonthDay = new Date(currentYear, currentMonth, -startWeekDay + i + 1);
    days.push({
      date: prevMonthDay.toISOString().split('T')[0],
      day: prevMonthDay.getDate(),
      isOtherMonth: true,
      isBooked: false,
      price: null
    });
  }
  
  for (let day = 1; day <= daysInMonth; day++) {
    const currentDate = new Date(currentYear, currentMonth, day);
    const dateStr = currentDate.toISOString().split('T')[0];
    
    const priceInfo = priceCalendar.value.find(p => p.date === dateStr);
    const bookedInfo = bookedCalendar.value.find(b => b.date === dateStr);
    
    days.push({
      date: dateStr,
      day: day,
      isOtherMonth: false,
      isBooked: !!bookedInfo,
      price: priceInfo?.price || null
    });
  }
  
  const totalCells = Math.ceil(days.length / 7) * 7;
  const remainingCells = totalCells - days.length;
  
  for (let i = 1; i <= remainingCells; i++) {
    const nextMonthDay = new Date(currentYear, currentMonth + 1, i);
    days.push({
      date: nextMonthDay.toISOString().split('T')[0],
      day: nextMonthDay.getDate(),
      isOtherMonth: true,
      isBooked: false,
      price: null
    });
  }
  
  return days;
});

const loadDetail = async () => {
  try {
    loading.value = true;
    error.value = '';
    
    const res = await sheep.$api.noAuth.getHomeDetail('4', props.id);
    
    if (res && res.homestay) {
      homestay.value = {
        ...res.homestay,
        image: getFirstValidImage(res.homestay.pics),
        fullAddress: `${res.homestay.province || ''}${res.homestay.city || ''}${res.homestay.district || ''}${res.homestay.address || ''}`
      };
      
      if (res.calendar && Array.isArray(res.calendar)) {
        priceCalendar.value = res.calendar[0] || [];
        bookedCalendar.value = res.calendar[1] || [];
      }
    } else {
      homestay.value = null;
    }
  } catch (err) {
    error.value = '加载失败，请稍后重试';
    homestay.value = null;
  } finally {
    loading.value = false;
  }
};

const getFirstValidImage = (pics) => {
  if (!pics || pics === 'null' || pics === '') return null;
  const picArray = pics.split(',').filter(pic => pic && pic !== 'null' && pic.trim() !== '');
  return picArray.length > 0 ? picArray[0].trim() : null;
};

const callPhone = (phone) => {
  if (!phone) return;
  uni.makePhoneCall({
    phoneNumber: phone
  });
};

const showBooking = () => {
  uni.showToast({
    title: '预订功能待开发',
    icon: 'none'
  });
};

onMounted(() => {
  loadDetail();
});
</script>

<style lang="scss" scoped>
$primary-color: #8B4513;
$secondary-color: #DAA520;
$text-dark: #333;
$text-light: #666;

.detail-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 140rpx;
}

.loading-container,
.error-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  
  .loading-text,
  .error-text,
  .empty-text {
    font-size: 28rpx;
    color: $text-light;
    margin-bottom: 20rpx;
  }
  
  .retry-btn {
    padding: 16rpx 32rpx;
    background: $primary-color;
    color: white;
    border-radius: 24rpx;
    font-size: 26rpx;
  }
}

.detail-content {
  .hero-section {
    position: relative;
    width: 100%;
    height: 500rpx;
    
    .hero-image {
      width: 100%;
      height: 100%;
    }
    
    .hero-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      
      .placeholder-emoji {
        font-size: 80rpx;
      }
    }
    
    .price-badge {
      position: absolute;
      top: 30rpx;
      right: 30rpx;
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 20rpx;
      border-radius: 20rpx;
      text-align: center;
      
      .price-text {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
      }
      
      .vip-price {
        display: block;
        font-size: 22rpx;
        color: $secondary-color;
        margin-top: 5rpx;
      }
    }
  }
  
  .content-section {
    background: white;
    padding: 40rpx;
    
    .title-section {
      margin-bottom: 30rpx;
      
      .main-title {
        display: block;
        font-size: 40rpx;
        font-weight: bold;
        color: $text-dark;
        margin-bottom: 10rpx;
      }
      
      .alias-name {
        display: block;
        font-size: 28rpx;
        color: $text-light;
        margin-bottom: 15rpx;
      }
      
      .address {
        font-size: 26rpx;
        color: $text-light;
      }
    }
    
    .basic-info {
      margin-bottom: 30rpx;
      
      .info-row {
        display: flex;
        margin-bottom: 20rpx;
        
        .info-item {
          flex: 1;
          display: flex;
          
          .info-label {
            font-size: 26rpx;
            color: $text-light;
            width: 100rpx;
          }
          
          .info-value {
            font-size: 26rpx;
            color: $text-dark;
            font-weight: 500;
          }
        }
      }
    }
    
    .devices-section,
    .contact-section {
      margin-bottom: 30rpx;
      
      .devices-text {
        font-size: 26rpx;
        color: $text-dark;
        line-height: 1.6;
      }
    }
    
    .section-title {
      display: block;
      font-size: 32rpx;
      font-weight: bold;
      color: $text-dark;
      margin-bottom: 20rpx;
    }
    
    .calendar-section {
      margin-bottom: 30rpx;
      
      .calendar-container {
        border: 2rpx solid #f0f0f0;
        border-radius: 16rpx;
        overflow: hidden;
        
        .calendar-legend {
          display: flex;
          padding: 20rpx;
          background: #f8f9fa;
          gap: 30rpx;
          
          .legend-item {
            display: flex;
            align-items: center;
            
            .legend-color {
              width: 20rpx;
              height: 20rpx;
              border-radius: 4rpx;
              margin-right: 10rpx;
              
              &.available {
                background: #e8f5e8;
                border: 2rpx solid #4caf50;
              }
              
              &.booked {
                background: #ffe8e8;
                border: 2rpx solid #f44336;
              }
            }
            
            .legend-text {
              font-size: 24rpx;
              color: $text-light;
            }
          }
        }
        
        .calendar-grid {
          .calendar-header {
            display: flex;
            background: #f0f0f0;
            
            .header-cell {
              flex: 1;
              text-align: center;
              padding: 20rpx 0;
              font-size: 24rpx;
              color: $text-dark;
              font-weight: bold;
            }
          }
          
          .calendar-body {
            display: flex;
            flex-wrap: wrap;
            
            .calendar-cell {
              width: calc(100% / 7);
              min-height: 120rpx;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              border-right: 1rpx solid #f0f0f0;
              border-bottom: 1rpx solid #f0f0f0;
              background: white;
              
              &.other-month {
                background: #f8f9fa;
                
                .day-number {
                  color: #ccc;
                }
              }
              
              &.booked {
                background: #ffe8e8;
                
                .day-number {
                  color: #f44336;
                }
              }
              
              &.has-price:not(.booked) {
                background: #e8f5e8;
                
                .day-number {
                  color: #4caf50;
                }
              }
              
              .day-number {
                font-size: 26rpx;
                font-weight: bold;
                margin-bottom: 5rpx;
              }
              
              .day-price {
                font-size: 20rpx;
                color: $primary-color;
              }
            }
          }
        }
      }
    }
    
    .contact-section {
      .contact-item {
        display: flex;
        margin-bottom: 15rpx;
        
        .contact-label {
          font-size: 26rpx;
          color: $text-light;
          width: 120rpx;
        }
        
        .contact-value {
          font-size: 26rpx;
          color: $primary-color;
          text-decoration: underline;
        }
      }
    }
    
    .rich-content {
      margin-bottom: 40rpx;
      
      :deep(.mp-html) {
        font-size: 28rpx;
        line-height: 1.8;
        color: $text-dark;
        
        img {
          max-width: 100%;
          border-radius: 12rpx;
          margin: 20rpx 0;
        }
        
        p {
          margin: 20rpx 0;
        }
      }
    }
  }
  
  .bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: white;
    padding: 20rpx;
    box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.1);
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      padding: 24rpx;
      border-radius: 25rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: bold;
      
      &.primary {
        background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
        color: white;
      }
      
      &.secondary {
        background: #f0f0f0;
        color: $text-dark;
      }
    }
  }
}
</style> 
